<template>
<!-- 侧边栏 -->
<aside>
    <!-- 选项卡组件 -->
    <Tab @switch="switchTab"/>
</aside>
<!-- 主体 -->
<main>
    <!-- 带缓存的动态组件 -->
    <KeepAlive>
        <component :is="tabs[currentTab]"></component>
    </KeepAlive>
</main>
<!-- 底栏 -->
<footer>
    <!-- 底栏组件 -->
    <Bar/>
</footer>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
//导入选项卡组件
import Tab from '../components/Tab.vue';
//导入菜单组件
import MainDishes from '../components/MainDishes.vue';
import SideDishes from '../components/SideDishes.vue';
import Drinks from '../components/Drinks.vue';
import History from '../components/History.vue';
//导入底栏组件
import Bar from '../components/Bar.vue';
//设置首屏显示内容
const currentTab=ref<string>('MainDishes');
//设置选项卡选项内容
interface ComponentCollection{
    [index:string]:object
}
const tabs:ComponentCollection={
    MainDishes,
    SideDishes,
    Drinks,
    History
}
//定义切换选项卡事件回调函数
function switchTab(tabOption:string):void{
    currentTab.value=tabOption;
}
</script>

<style lang="scss" scoped>
$sidebar-width:28vw;
$menu-width:calc(100vw - $sidebar-width);
$footer-width:100vw;
$footer-height:45px;
$main-height:calc(100vh - $footer-height);
/* 侧边栏布局 */
aside{
    position:fixed;
    left:0;
    width:$sidebar-width;
    height:$main-height;
    background-color: green;
}
/* 主体布局 */
main{
    margin-left:$sidebar-width;
    width:$menu-width;
    padding-bottom: $footer-height;
}
/* 底栏布局 */
footer{
    position:fixed;
    bottom:0;
    width:$footer-width;
    height:$footer-height;
    background-color: white;
    display: flex;
    align-items: center;
}
</style>
